<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts</title>
    <style>
        #container{
            width: 1200px;
            height: 800px;
        }
    </style>
    <script src="./js/echarts.min.js"></script>
</head>
<body>
    <h1>echarts-国产最好用的图表工具</h1>
    <p>竞品：D3.js ,heightCharts</p>
    <div id="container"></div>
    <script>
        // 创建一个echarts的实例
        var echart = echarts.init(document.getElementById("container"))
        // 创建选项
        var option = {
            title:{text:"程序员一周睡眠时间"}, //标题
            tooltip:{},//提示
            legend:{data:['前端','java']},//图例
            xAxis:{data:["一","二","三","四","五","六","日"]},//x轴线
            yAxis:{},// y轴线
            series:[ //系列数据
                {name:"前端",type:'bar',data:[7,6,5,8,7,12,15]},//前端的数据
                {name:"java",type:'bar',data:[5,3,2,1,8,4,8]},//前端的数据
            ]
        }
        // 设置渲染
        echart.setOption(option)

        // init初始化   charts图表   option选项  text文本  tooltip提示工具  legend传奇（图例） xAxis x刻度
        // Series 系列，name名称 data数据
        // type:'line'|'bar'|'pie' 线,柱状图，饼形图
    </script>
</body>
</html>